<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>students</title>
    <% pageContext.setAttribute("path", request.getContextPath()); %>
    <!--引入jQuery-->
    <script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <!--引入css和js-->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 添加栏 -->
<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加学生</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addForm">
                    <div class="form-group">
                        <label for="studentName" class="col-sm-2 control-label">姓名：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="studentName" name="studentName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="studentClass" class="col-sm-2 control-label">班级：</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="studentClass" name="studentClass">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="studentGrade" class="col-sm-2 control-label">年级：</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="studentGrade" name="studentGrade">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="studentSubmit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 修改栏 -->
<div class="modal fade" id="myModalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabelUpdate">添加学生</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="updateForm">
                    <div class="form-group">
                        <label for="studentName" class="col-sm-2 control-label">学生姓名：</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="updateNameP"></p>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="studentClass" class="col-sm-2 control-label">学生班级：</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="studentClassUpdate" name="studentClass">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="studentGrade" class="col-sm-2 control-label">学生年级：</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="studentGradeUpdate" name="studentGrade">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="studentSubmitUpdate">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--自动填充的栅式布局-->

<div class="container">
    <!--标题-->
    <div class="row">
        <div class="col-lg-8 col-lg-offset-4"><h1>学生信息管理</h1></div>
    </div>
    <!--按钮-->
    <div class="row">
        <div class="col-lg-4 col-lg-offset-8">
            <button class="btn btn-danger btn-lg " type="button"
                    data-toggle="modal" data-target="myModalAdd" id="insert_Student">新增
            </button>
            <button class="btn btn-primary btn-lg " type="button"
                    data-toggle="modal" data-target="del" id="deleteAll">删除
            </button>
            <script type="text/javascript">
                //绑定新增模态框
                $("#insert_Student").click(function () {
                    $("#myModalAdd").modal({
                        backdrop: "static"
                    });
                });

                //前端校验
                function validate_add_from() {
                    var sname = $("#studentName").val();
                    var sclass = $("#studentClass").val();
                    var sgrade = $("#studentGrade").val();
                    var regname = /(^[a-zA-Z0-9_-]{1,16}$)|(^[\u2E80-\u9FFF]{1,10})/;
                    var regnum = /^[0-9]{1,16}$/;
                    if (!regname.test(sname)) {
                        $("#studentName").parent().removeClass("has-error has-success");
                        $("#studentName").next("span").text("");
                        $("#studentName").parent().addClass("has-error");
                        $("#studentName").next("span").text("用户名格式错误,请重新输入！");
                        return false;
                    } else {
                        $("#studentName").parent().removeClass("has-error has-success");
                        $("#studentName").next("span").text("");
                        $("#studentName").parent().addClass("has-success");
                        $("#studentName").next("span").text("用户名格式正确！");
                        return true;
                    }
                    if (!regnum.test(sclass)) {
                        $("#studentClass").parent().removeClass("has-error has-success");
                        $("#studentClass").next("span").text("");
                        $("#studentClass").parent().addClass("has-error");
                        $("#studentClass").next("span").text("班级格式错误,请重新输入！");
                        return false;
                    } else {
                        $("#studentClass").parent().removeClass("has-error has-success");
                        $("#studentClass").next("span").text("");
                        $("#studentClass").parent().addClass("has-success");
                        $("#studentClass").next("span").text("班级名格式正确！");
                        return true;
                    }
                    if (!regnum.test(sgrade)) {
                        $("#studentGrade").parent().removeClass("has-error has-success");
                        $("#studentGrade").next("span").text("");
                        $("#studentGrade").parent().addClass("has-error");
                        $("#studentGrade").next("span").text("年级格式错误,请重新输入！");
                        return false;
                    } else {
                        $("#studentGrade").parent().removeClass("has-error has-success");
                        $("#studentGrade").next("span").text("");
                        $("#studentGrade").parent().addClass("has-success");
                        $("#studentGrade").next("span").text("年级格式正确！");
                        return true;
                    }


                }

                //提交添加监听器
                $("#studentSubmit").click(function () {
                    if (!validate_add_from()) {
                        return false;
                    }
                    $.ajax({
                        url: "${path}/student",
                        type: "post",
                        data: $("#myModalAdd form").serialize(),
                        success: function (data) {
                            if (data.code == 200) {
                                $("#myModalAdd").modal('hide');
                                to_page(totalRecord);
                            }
                            else {
                                alert("校验失败，输入信息错误！")
                            }
                        }

                    });
                });



                //绑定删除
                $("#deleteAll").click(function () {
                    //循环遍历查找id
                    var ids;
                    $.each($(".check_item:checked"),function () {
                        ids+=$(this).parents("tr").find("td:eq(1)").text()+"-";
                        $.ajax({
                        url: "${path}/student/deleteCheck/"+ids ,
                        type: "DELETE",
                        success: function () {
                        to_page(1);
                        }});

                    });
                });












            </script>
        </div>
    </div>
    <!--显示表格数据-->
    <div class="row">
        <div>
            <table class="table table-hover" id="students_table">
                <thead>
                <tr>
                    <th>
                    </th>
                    <th>学生学号</th>
                    <th>学生姓名</th>
                    <th>学生班级</th>
                    <th>学生年级</th>
                    <th>操 作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <!--显示分页信息-->
    <div class="row">
        <!--显示分页信息-->
        <div class="col-lg-6" id="pagesMSG">
        </div>
        <!--显示分页条-->
        <div class="col-lg-6" id="nav">

            <script type="text/javascript">
                //写入各个方法
                $(function () {
                    //去第一页
                    to_page(1);
                });


                function to_page(page) {
                    $.ajax({
                        url: "${path}/students",
                        data: "page=" + page,
                        type: "GET",
                        success: function (result) {
                            //解析并显示员工数据
                            bulid_students_table(result);
                            bulid_pages_info(result);
                            bulid_pages_nav(result);
                        }
                    });
                }

                //添加员工信息
                function bulid_students_table(result) {
                    $("#students_table tbody").empty();
                    //获取list
                    var students = result.extendMap.pageInfo.list;
                    //遍历显示list
                    $.each(students, function (index, item) {
                        var box=$("<td><input type='checkbox' class='check_item'/></td>");
                        box.attr("boxId",item.studentId);
                        var studentIdTd = $("<td></td>").append(item.studentId);
                        var studentNameTd = $("<td></td>").append(item.studentName);
                        var studentClassTd = $("<td></td>").append(item.studentClass);
                        var studentGradeTd = $("<td></td>").append(item.studentGrade);
                        var addBtn = $("<button></button>").addClass("btn btn-success")
                            .append($("<span></span>").addClass("glyphicon glyphicon-user").append("修改"));
                        addBtn.attr("addId", item.studentId);
                        var delBtn = $("<button></button>").addClass("btn btn-warning")
                            .append($("<span></span>").addClass("glyphicon glyphicon-trash").append("删除"));
                        delBtn.attr("addId", item.studentId);
                        var Btn = $("<td></td>").append(addBtn).append(delBtn);
                        $("<tr></tr>")
                            .append(box)
                            .append(studentIdTd)
                            .append(studentNameTd)
                            .append(studentClassTd)
                            .append(studentGradeTd)
                            .append(Btn)
                            .appendTo("#students_table tbody");
                        //绑定新增模态框
                        $(addBtn).click(function () {
                            $("#studentSubmitUpdate").attr("addId", $(this).attr("addId"));
                            getName($(this).attr("addId"));
                            $("#myModalUpdate").modal({
                                backdrop: "static"
                            });
                        });
                        //绑定修改的submit
                        $("#studentSubmitUpdate").click(function () {
                            $.ajax({
                                url: "${path}/student/" + $(this).attr("addId"),
                                type: "PUT",
                                data: $("#myModalUpdate form").serialize(),
                                success: function (data) {
                                    alert(massage);
                                    $("#myModalUpdate").modal('hide');
                                }

                            });
                        });

                        function getName(id) {
                            $.ajax({
                                url: "${path}/getName",
                                data: "id=" + id,
                                type: "GET",
                                success: function (result) {
                                    var name = result.extendMap.name;
                                    $("#updateNameP").text(name);
                                }
                            });
                        }

                        //绑定删除
                        $(delBtn).click(function () {
                            $.ajax({
                                url: "${path}/student/" + $(delBtn).attr("addId"),
                                type: "DELETE",
                                success: function () {
                                    to_page(1);
                                }

                            });
                        });

                    });

                }

                //显示分页信息数据
                function bulid_pages_info(result) {
                    $("#pagesMSG").empty();
                    var pageNum = result.extendMap.pageInfo.pageNum;
                    var pages = result.extendMap.pageInfo.pages;
                    var pageTotal = result.extendMap.pageInfo.total;
                    $("#pagesMSG").append("当前为第" + pageNum + "页,共"
                        + pages + "页，共有记录" + pageTotal + "条");
                    totalRecord = result.extendMap.pageInfo.total;

                }

                //显示分页条
                function bulid_pages_nav(result) {
                    $("#nav").empty();
                    //创建ui标签和分页条各个标签 并循环加入ui标签
                    var pageUl = $("<ul></ul>").addClass("pagination");
                    var firstPageLi = $("<li></li>").append($("<a></a>")
                        .append("首页").attr("href", "#"));
                    var prePageLi = $("<li></li>").append($("<a></a>")
                        .append("&laquo;").attr("href", "#"));
                    var nextPageLi = $("<li></li>").append($("<a></a>")
                        .append("&raquo;").attr("href", "#"));
                    var endPageLi = $("<li></li>").append($("<a></a>")
                        .append("末页").attr("href", "#"));
                    endPageLi.click(function () {
                        to_page(result.extendMap.pageInfo.pages);
                    });
                    if (!result.extendMap.pageInfo.isFirstPage) {
                        pageUl.append(firstPageLi);
                    }
                    if (result.extendMap.pageInfo.hasPreviousPage) {
                        pageUl.append(prePageLi);
                    }
                    //循环加入数字标签并实现功能
                    $.each(result.extendMap.pageInfo.navigatepageNums,
                        function (index, item) {
                            var numPageLi = $("<li></li>").append($("<a></a>")
                                .append(item).attr("href", "#"));
                            if (result.extendMap.pageInfo.pageNum == item) {
                                numPageLi.addClass("active");
                            }
                            //绑定单击事件
                            numPageLi.click(function () {
                                to_page(item);
                            });
                            // 加入ul
                            pageUl.append(numPageLi);
                        });
                    if (result.extendMap.pageInfo.hasNextPage) {
                        pageUl.append(nextPageLi);
                    }
                    if (!result.extendMap.pageInfo.isLastPage) {
                        pageUl.append(endPageLi);
                    }
                    //绑定单击事件
                    firstPageLi.click(function () {
                        to_page(1);
                    });
                    prePageLi.click(function () {
                        to_page(result.extendMap.pageInfo.prePage);
                    });
                    nextPageLi.click(function () {
                        to_page(result.extendMap.pageInfo.nextPage);
                    });
                    endPageLi.click(function () {
                        to_page(result.extendMap.pageInfo.pages);
                    });

                    //创建nav标签并把ui加入
                    var nav = $("<nav></nav>").append(pageUl).appendTo("#nav");


                }




            </script>

        </div>
    </div>
</div>
</body>
</html>
